<template>
    <div class="flex items-center justify-center gap-[0.5rem]">
        <div class="px-[0.81rem] py-[0.56rem] bg-[#fff] rounded-[9999px] flex items-center justify-center cursor-pointer" style="border: 1px solid #E5E7EB"  :class="currentPage === 1 ? 'opacity-50 !cursor-not-allowed' : 'hover:bg-[#F3F4F6]'" @click="handlePrev">
            <img src="/public/icon/arrow-left-blod.png" alt="" class="h-[1rem] w-[0.625rem]">
        </div>
        <template v-for="(item, index) in pageList" :key="index">
            <!-- 省略号 -->
            <div v-if="item === '...'" class="px-[0.875rem] py-[0.25rem] bg-[#fff] rounded-[9999px] flex items-center justify-center text-[1rem] text-[#4B5563]" style="border: 1px solid #E5E7EB">
                {{ item }}
            </div>
            <!-- 页码按钮 -->
            <div 
                v-else
                class="px-[0.875rem] py-[0.25rem] rounded-[9999px] flex items-center justify-center text-[1rem] cursor-pointer"
                :class="item === currentPage ? 'bg-[#000000] text-[#fff]' : 'bg-[#fff] text-[#4B5563] hover:bg-[#F3F4F6]'"
                style="border: 1px solid #E5E7EB"
                @click="handlePageChange(item)"
            >
                {{ item }}
            </div>
        </template>
        <div class="px-[0.81rem] py-[0.56rem] bg-[#fff] rounded-[9999px] flex items-center justify-center  cursor-pointer" style="border: 1px solid #E5E7EB" :class="currentPage === totalPages ? 'opacity-50 !cursor-not-allowed' : 'hover:bg-[#F3F4F6]'" @click="handleNext">
            <img src="/public/icon/arrow-right-blod.png" alt="" class="h-[1rem] w-[0.625rem]">
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref,computed,defineProps,defineEmits} from 'vue';
const props = defineProps({
    total: {
        type: Number,
        required: true
    },
    pageSize: {
        type: Number,
        default: 10
    },
    currentPage: {
        type: Number,
        default: 1
    }
})
const emit = defineEmits(['update:currentPage'])
const totalPages = computed(() => Math.ceil(props.total / props.pageSize))
const pageList = computed(() => {
    const pages: (number | string)[] = []
    const maxVisiblePages = 7 // 最大可见页码数

    if (totalPages.value <= maxVisiblePages) {
        // 如果总页数小于等于最大可见页码数，显示所有页码
        for (let i = 1; i <= totalPages.value; i++) {
            pages.push(i)
        }
    } else {
        // 始终显示第一页
        pages.push(1)

        // 计算中间页码的起始和结束
        let start = Math.max(2, props.currentPage - 1)
        let end = Math.min(totalPages.value - 1, props.currentPage + 1)

        // 调整起始和结束页码，确保显示足够的页码
        if (start <= 2) {
            end = Math.min(4, totalPages.value - 1)
        }
        if (end >= totalPages.value - 1) {
            start = Math.max(2, totalPages.value - 3)
        }

        // 添加省略号
        if (start > 2) {
            pages.push('...')
        }

        // 添加中间页码
        for (let i = start; i <= end; i++) {
            pages.push(i)
        }

        // 添加省略号
        if (end < totalPages.value - 1) {
            pages.push('...')
        }

        // 始终显示最后一页
        pages.push(totalPages.value)
    }

    return pages
})
const handlePageChange = (page: number | string) => {
    if (typeof page === 'number' && page !== props.currentPage) {
        emit('update:currentPage', page)
    }
}

const handlePrev = () => {
    if (props.currentPage > 1) {
        emit('update:currentPage', props.currentPage - 1)
    }
}

const handleNext = () => {
    if (props.currentPage < totalPages.value) {
        emit('update:currentPage', props.currentPage + 1)
    }
}
</script>
<style scoped lang="scss">

</style>

